<template>
    <div>
        <el-input style="width: 150px;margin-left: 0px;margin-right: 20px;" placeholder="请输入单据编号或客户名或备注"
            v-model="receiveOrderId" clearable>
        </el-input>
        <span class="demonstration">日期：</span>
        <el-date-picker v-model="startTime" align="right" type="date" placeholder="选择开始日期"
            :picker-options="pickerOptions" @change="handleStartDateChange" style="margin-left: 10px;"></el-date-picker>

        <el-date-picker v-model="endTime" align="right" type="date" placeholder="选择结束日期" :picker-options="pickerOptions"
            @change="handleEndDateChange" style="margin-left: 10px;"></el-date-picker>



        <el-button type="primary" style="margin-left: 20px;float: right;" @click="searchPage(1, 5)">查询</el-button>
        <div style="clear: both;"></div>


        <hr style="margin-top: 10px">

        <div style="float: right;clear: both;margin-top: 10px">
            <el-button type="primary" @click="goto('WriteOff4')">新增</el-button>
            <el-button type="">导出</el-button>
        </div>
        <br>

        <el-table height="300px" :data="pageInfo.list" border style="width: 100%; font-size: 13px;margin-top: 10px;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column fixed prop="date" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row.id)" type="text" size="small">删除</el-button>
                    <el-button @click="updateType(scope.row.id, scope.row.serviceType)" type="text"
                        size="small">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="orderDate" label="单据日期" width="120">
            </el-table-column>
            <el-table-column prop="receiveOrderId" label="单据编号" width="120">
            </el-table-column>
            <el-table-column prop="serviceType" label="业务类型" width="120">
            </el-table-column>
            <el-table-column prop="zip" label="客户1/供应商1" width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.consumerName1 != null">{{ scope.row.consumerName1 }}</span>
                    <span v-else>{{ scope.row.providerName1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="city" label="客户2/供应商2" width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.consumerName2 != null">{{ scope.row.consumerName2 }}</span>
                    <span v-else>{{ scope.row.providerName2 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="writeOffMoney" label="核销金额" width="120">
            </el-table-column>
            <el-table-column prop="doId" label="制单人" width="120">
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="120">
            </el-table-column>
            <el-table-column prop="city" label="生成方式" width="120">
            </el-table-column>
        </el-table>

        <el-pagination style="position: relative;left: 30px;" @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" layout="total, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
    </div>

</template>

<script>
import Top from './Top.vue';

export default {
    name: "WriteOff",
    components:
    {
        Top
    },
    data() {
        return {
            startTime: "",
            endTime: "",
            receiveOrderId: "",
            dialogFormVisible: false,
            choose: false,
            choose1: false,
            path: "",
            pageInfo: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },

            props: {
                label: 'name',
                children: 'zones'
            },
            count: 1,
            value1: '',
            value2: '',
        };
    },
    methods: {
        updateType: function (id, type) {
            // alert(id)
            if (type === "应收转应收") {
                this.$router.push({ name: 'WriteOff4U', query: { id: id } });
            } else {
                this.$router.push({ name: 'WriteOff5U', query: { id: id } });
            }
        },
        searchPage: function (pageNum, pageSize) {
            this.axios({
                url: "/cash/writeOff/receiptByPage",
                params: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    receiveOrderId: this.receiveOrderId,
                    startTime: this.startTime,
                    endTime: this.endTime
                }
            }).then(rs => {
                console.log(rs.data)
                this.pageInfo = rs.data.pageInfo
            })
        },
        handleCurrentChange(val) {
            this.searchPage(val, 5)
        },
        goto() {

            this.$router.push(this.path)
        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
        },
        handleNodeClick(data) {
            console.log(data);
        },
        loadNode(node, resolve) {
            if (node.level === 0) {
                return resolve([{ name: 'region1' }, { name: 'region2' }]);
            }
            if (node.level > 3) return resolve([]);

            var hasChild;
            if (node.data.name === 'region1') {
                hasChild = true;
            } else if (node.data.name === 'region2') {
                hasChild = false;
            } else {
                hasChild = Math.random() > 0.5;
            }

            setTimeout(() => {
                var data;
                if (hasChild) {
                    data = [{
                        name: 'zone' + this.count++
                    }, {
                        name: 'zone' + this.count++
                    }];
                } else {
                    data = [];
                }

                resolve(data);
            }, 500);
        },
        goto(to) {
            this.$router.push(to)
        },
        handleStartDateChange(val) {
            console.log('开始日期改变：', val);
            this.startTime = val

            // 可以在这里处理开始日期改变后的逻辑
        },
        handleEndDateChange(val) {
            console.log('结束日期改变：', val);
            this.endTime = val
            // 可以在这里处理结束日期改变后的逻辑
        }
    },
    created: function () {
        this.searchPage(1, 5)
    }
}
</script>

<style>
tr {
    border: 1px solid black;
}
</style>